import 'package:flutter/material.dart';
import 'package:get/get_state_manager/src/simple/get_view.dart';

import 'PlaceController.dart';
import 'PlacePlayerWidget.dart';

class PlaceStepOne extends GetView<PlaceController> {
  const PlaceStepOne({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
            width: double.infinity,
            child: Text('Level Placement Test',
                textAlign: TextAlign.center,
                style: TextStyle(
                    fontSize: 32,
                    color: Color(0xff252525),
                    height: 1.2,
                    fontWeight: FontWeight.bold))),
        const SizedBox(height: 10),
        _buildTextAudio(
            'As a new user, please take a short Level Placement Test (less than 15 minutes) to find your suitable reading level.',
            'https://ichinsereader-prod.s3.amazonaws.com/content/media/placement/audio/01.mp3'),
        _buildTextAudio('This test consists of two parts:',
            'https://ichinsereader-prod.s3.amazonaws.com/content/media/placement/audio/02.mp3'),
        Text('• Your Chinese learning experienceLevel Placement Test',
            style: TextStyle(
                fontSize: 18,
                color: Color(0xff4FA397),
                height: 1.5,
                fontWeight: FontWeight.w500)),
        Text('• Some quizzes',
            style: TextStyle(
                fontSize: 18,
                color: Color(0xff4FA397),
                height: 1.5,
                fontWeight: FontWeight.w500)),
        _buildTextAudio(
            'This test can only be done ONCE, please try your best.',
            'https://ichinsereader-prod.s3.amazonaws.com/content/media/placement/audio/03.mp3'),
        const SizedBox(height: 30),
        SizedBox(
            width: double.infinity,
            height: 50,
            child: MaterialButton(
                color: Color(0xffd1e5b5),
                textColor: Color(0xff4fa397),
                child: Text('Start Test',
                    style:
                        TextStyle(fontSize: 18, fontWeight: FontWeight.w800)),
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(6.0),
                    side: BorderSide(
                      color: Color(0xffa4cc69),
                    )),
                onPressed: () {
                  controller.stepTop.value = 1;
                  controller.bottomBtnStatus.value = 4;
                }))
      ],
    );
  }

  Widget _buildTextAudio(String text, String audioUrl) {
    return RichText(
        text: TextSpan(
      text: text,
      style: TextStyle(
          fontSize: 18,
          color: Color(0xff212529),
          height: 1.5,
          fontWeight: FontWeight.w500),
      children: [
        WidgetSpan(
            alignment: PlaceholderAlignment.middle,
            child: PlacePlayerWidget(audioUrl: audioUrl))
      ],
    ));
  }
}
